<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title>数据查询及变更管理系统</title>
	<!-- Bootstrap -->
	<link href="/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- Font Awesome -->
	<link href="/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
	<!-- NProgress -->
	<link href="/vendors/nprogress/nprogress.css" rel="stylesheet" />
	<!-- iCheck -->
	<link href="/vendors/iCheck/skins/flat/green.css" rel="stylesheet" />
	<link href="/vendors/jquery-treeview/jquery.treeview.css" rel="stylesheet" />
	<!-- bootstrap-progressbar -->
	<link href="/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" />
	<!-- Switchery -->
	<link href="/vendors/switchery/dist/switchery.min.css" rel="stylesheet" />
	<!-- JQVMap -->
	<link href="/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
	<!-- bootstrap-daterangepicker -->
	<link href="/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
	<link href="/assets/styles/custom.min.css" rel="stylesheet" />
	</head>
<body class="nav-md">
<div id="login" style="display:none;">
	<div class="login_wrapper">
		<div class="animate form login_form">
			<section class="login_content">
				<form>
					<h1>Login Form</h1>
					<div>
						<input type="text" class="form-control" placeholder="账号" required="" id="txt_login" />
					</div>
					<div>
						<input type="password" class="form-control" placeholder="密码" required="" id="password" />
					</div>
					<div>
						<button id="btn_login" type="button" class="btn btn-block btn-success">登录</button>
					</div>
					<div class="modal fade bs-example-modal-sm in" tabindex="-1" role="dialog" aria-hidden="true" style="display: none; padding-right: 9px;">
						<div class="modal-dialog modal-sm">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
									<h4 class="modal-title" id="myModalLabel2">错误</h4>
								</div>
								<div class="modal-body">
									<p>账号或者密码不正确，登录失败。</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-danger">确定</button>
								</div>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
				</form>
			</section>
		</div>
	</div>
</div>
<div class="container body" style="display:none;" id="main">
	<div class="main_container">
		<div class="col-md-3 left_col menu_fixed">
			<div class="left_col scroll-view">
				<div class="navbar nav_title" style="border: 0;">
					<form class="form-horizontal form-label-left">
						<div class="form-group">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<select class="form-control">
									<option>请选择目标群集</option>
									<option>Option one</option>
									<option>Option two</option>
									<option>Option three</option>
									<option>Option four</option>
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="clearfix"></div>
				<!-- sidebar menu -->
				<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
					<div class="menu_section">
						<label><i class="fa fa-sitemap"></i>数据库结构</label>
						<ul id="browser" class="filetree">
							<li class="closed"><span><i class="fa fa-database"></i>数据库 1</span>
								<ul>
									<li class="closed"><span><i class="fa fa-table"></i>表 1.1</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 2.1</span>
												<ul id="folder21">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 2.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-folder"></i>File 2.2.1</span>
														<ul id="folder21">
															<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
															<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
														</ul>
													</li>
													<li class="closed"><span><i class="fa fa-folder"></i>File 2.2.2</span>
														<ul id="folder21">
															<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
															<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="closed"><span><i class="fa fa-table"></i>表 2</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 2.1</span>
												<ul id="folder21">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 2.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-sitemap"></i>File 2.2.1</span></li>
													<li class="closed"><span><i class="fa fa-sitemap"></i>File 2.2.2</span></li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="closed"><span><i class="fa fa-table"></i>表 3</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 3.1</span>
												<ul id="folder31">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 3.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.1</span></li>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.2</span></li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="closed"><span><i class="fa fa-database"></i>数据库 2</span>
								<ul>
									<li class="closed"><span><i class="fa fa-table"></i>表 1.1</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 2.1</span>
												<ul id="folder21">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 2.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.1</span></li>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.2</span></li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="closed"><span><i class="fa fa-table"></i>表 2</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 2.1</span>
												<ul id="folder21">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 2.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.1</span></li>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.2</span></li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="closed"><span><i class="fa fa-table"></i>表 3</span>
										<ul>
											<li class="closed"><span><i class="fa fa-folder"></i>字段 3.1</span>
												<ul id="folder31">
													<li><span><i class="fa fa-navicon"></i>File 2.1.1</span></li>
													<li><span><i class="fa fa-navicon"></i>File 2.1.2</span></li>
												</ul>
											</li>
											<li class="closed"><span><i class="fa fa-folder"></i>索引 3.2</span>
												<ul>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.1</span></li>
													<li class="closed"><span><i class="fa fa-sort-amount-asc"></i>File 2.2.2</span></li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<!-- /sidebar menu -->
			</div>
		</div>
		<!-- top navigation -->
		<div class="top_nav">
			<div class="nav_menu">
				<nav>
					<ul class="nav navbar-nav" id="nav-pages">
						<li><a href="#"><i class="fa fa-dashboard"></i> 首页看板</a></li>
						<li style="display:none;"><a href="#"><i class="fa fa-search"></i> 数据查询</a></li>
						<li style="display:none;"><a href="#"><i class="fa fa-wpforms"></i> 变更工单</a></li>
						<li style="display:none;"><a href="#"><i class="fa fa-server"></i> 群集管理</a></li>
						<li style="display:none;"><a href="#"><i class="fa fa-user"></i> 用户管理</a></li>
						<li style="display:none;"><a href="#"><i class="fa fa-gear"></i> 系统设置</a></li>
						<li><a href="#"><i class="fa fa-support"></i> 使用帮助</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="">
							<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></a>
							<ul class="dropdown-menu dropdown-usermenu pull-right">
								<li><a href="javascript:;">个人概况</a></li>
								<!--
								<li><a href="javascript:;"><span class="badge bg-red pull-right">50%</span><span>偏好设置</span></a></li>
								-->
								<li><a href="javascript:;" id="logout"><i class="fa fa-sign-out pull-right"></i>退出登录</a></li>
							</ul>
						</li>
						<!--
						<li role="presentation" class="dropdown">
							<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
								<i class="fa fa-envelope-o"></i>
								<span class="badge bg-green">6</span>
							</a>
							<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
								<li>
									<a>
										<span class="image"><img src="/assets/images/avatars/01.png" alt="Profile Image" /></span>
										<span><span>John Smith</span><span class="time">3 mins ago</span></span>
										<span class="message">Film festivals used to be do-or-die moments for movie makers. They were where...</span>
									</a>
								</li>
								<li>
									<a>
										<span class="image"><img src="/assets/images/avatars/01.png" alt="Profile Image" /></span>
										<span><span>John Smith</span><span class="time">3 mins ago</span></span>
										<span class="message">Film festivals used to be do-or-die moments for movie makers. They were where...</span>
									</a>
								</li>
								<li>
									<a>
										<span class="image"><img src="/assets/images/avatars/01.png" alt="Profile Image" /></span>
										<span><span>John Smith</span><span class="time">3 mins ago</span></span>
										<span class="message">Film festivals used to be do-or-die moments for movie makers. They were where...</span>
									</a>
								</li>
								<li>
									<a>
										<span class="image"><img src="/assets/images/avatars/01.png" alt="Profile Image" /></span>
										<span><span>John Smith</span><span class="time">3 mins ago</span></span>
										<span class="message">Film festivals used to be do-or-die moments for movie makers. They were where...</span>
									</a>
								</li>
								<li>
									<div class="text-center">
										<a><strong>See All Alerts</strong><i class="fa fa-angle-right"></i></a>
									</div>
								</li>
							</ul>
						</li>
						-->
					</ul>
				</nav>
			</div>
		</div>
		<!-- /top navigation -->
		<!-- page content -->
		<div class="right_col" role="main" id="dashboard">
			<div class="row">
				<div class="col-md-12">
					<div class="">
						<div class="x_content">
							<div class="row">
								<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="tile-stats">
										<div class="icon"><i class="fa fa-caret-square-o-right"></i></div>
										<div class="count">179</div>
										<h3>注册用户总数</h3>
										<p>显示系统注册用户总数，包含管理员。</p>
									</div>
								</div>
								<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="tile-stats">
										<div class="icon"><i class="fa fa-comments-o"></i></div>
										<div class="count">179</div>
										<h3>变更工单总数</h3>
										<p>显示系统变更工单总数，包括审核不通过的。</p>
									</div>
								</div>
								<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="tile-stats">
										<div class="icon"><i class="fa fa-sort-amount-desc"></i></div>
										<div class="count">179</div>
										<h3>群集主机总数</h3>
										<p>显示系统中群集主机总数，但不包含从库。</p>
									</div>
								</div>
								<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="tile-stats">
										<div class="icon"><i class="fa fa-check-square-o"></i></div>
										<div class="count">179</div>
										<h3>系统从库总数</h3>
										<p>系统从库总数，不包含主库。</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 col-sm-4 col-xs-12">
					<div class="x_panel tile fixed_height_320">
						<div class="x_title">
							<h2>目标群集统计</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<h4>App Usage across versions</h4>
							<div class="widget_summary">
								<div class="w_left w_25"><span>0.1.5.2</span></div>
								<div class="w_center w_55">
									<div class="progress">
										<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100" style="width: 66%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
								</div>
								<div class="w_right w_20"><span>123k</span></div>
								<div class="clearfix"></div>
							</div>
							<div class="widget_summary">
								<div class="w_left w_25"><span>0.1.5.3</span></div>
								<div class="w_center w_55">
									<div class="progress">
										<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
								</div>
								<div class="w_right w_20"><span>53k</span></div>
								<div class="clearfix"></div>
							</div>
							<div class="widget_summary">
								<div class="w_left w_25"><span>0.1.5.4</span></div>
								<div class="w_center w_55">
									<div class="progress">
										<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
								</div>
								<div class="w_right w_20"><span>23k</span></div>
								<div class="clearfix"></div>
							</div>
							<div class="widget_summary">
								<div class="w_left w_25"><span>0.1.5.5</span></div>
								<div class="w_center w_55">
									<div class="progress">
										<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
								</div>
								<div class="w_right w_20"><span>3k</span></div>
								<div class="clearfix"></div>
							</div>
							<div class="widget_summary">
								<div class="w_left w_25"><span>0.1.5.6</span></div>
								<div class="w_center w_55">
									<div class="progress">
										<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60"
										aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
								</div>
								<div class="w_right w_20"><span>1k</span></div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<div class="x_panel tile fixed_height_320 overflow_hidden">
						<div class="x_title">
							<h2>工单状态统计</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="" style="width:100%">
								<tr>
									<th style="width:37%;"><p>Top 5</p></th>
									<th>
										<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"><p class="">Device</p></div>
										<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"><p class="">Progress</p></div>
									</th>
								</tr>
								<tr>
									<td>
										<canvas class="canvasDoughnut" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
									</td>
									<td>
										<table class="tile_info">
											<tr>
												<td><p><i class="fa fa-square blue"></i>IOS</p></td>
												<td>30%</td>
											</tr>
											<tr>
												<td><p><i class="fa fa-square green"></i>Android</p></td>
												<td>10%</td>
											</tr>
											<tr>
												<td><p><i class="fa fa-square purple"></i>Blackberry</p></td>
												<td>20%</td>
											</tr>
											<tr>
												<td><p><i class="fa fa-square aero"></i>Symbian</p></td>
												<td>15%</td>
											</tr>
											<tr>
												<td><p><i class="fa fa-square red"></i>Others</p></td>
												<td>30%</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<div class="x_panel tile fixed_height_320">
						<div class="x_title">
							<h2>Quick Settings</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<div class="dashboard-widget-content">
								<ul class="quick-list">
									<li><i class="fa fa-calendar-o"></i><a href="#">Settings</a></li>
									<li><i class="fa fa-bars"></i><a href="#">Subscription</a></li>
									<li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a></li>
									<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a></li>
									<li>
										<i class="fa fa-bar-chart"></i>
										<a href="#">Auto Renewal</a>
									</li>
									<li>
										<i class="fa fa-line-chart"></i>
										<a href="#">Achievements</a>
									</li>
									<li>
										<i class="fa fa-area-chart"></i>
										<a href="#">Logout</a>
									</li>
								</ul>
								<div class="sidebar-widget">
									<h4>Profile Completion</h4>
									<canvas width="150" height="80" id="chart_gauge_01" class="" style="width: 160px; height: 100px;">
									</canvas>
									<div class="goal-wrapper">
										<span id="gauge-text" class="gauge-value pull-left">0</span>
										<span class="gauge-value pull-left">%</span>
										<span id="goal-text" class="goal-value pull-right">100%</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 col-sm-4 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>最新工单<small>系统最新的十条工单。</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<div class="dashboard-widget-content">
								<ul class="list-unstyled timeline widget">
									<li>
										<div class="block">
											<div class="block_content">
												<h2 class="title"><a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a></h2>
												<div class="byline"><span>13 hours ago</span>by<a>Jane Smith</a></div>
												<p class="excerpt">
													Film festivals used to be do-or-die moments for movie makers. They were
													where you met the producers that could fund your project, and if the buyers
													liked your flick, they’d pay to Fast-forward and…
													<a>Read&nbsp;More</a>
												</p>
											</div>
										</div>
									</li>
									<li>
										<div class="block">
											<div class="block_content">
												<h2 class="title"><a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a></h2>
												<div class="byline"><span>13 hours ago</span>by<a>Jane Smith</a></div>
												<p class="excerpt">
													Film festivals used to be do-or-die moments for movie makers. They were
													where you met the producers that could fund your project, and if the buyers
													liked your flick, they’d pay to Fast-forward and…
													<a>Read&nbsp;More</a>
												</p>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-8 col-sm-8 col-xs-12">
					<div class="row">
						<!-- Start to do list -->
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="x_panel">
								<div class="x_title">
									<h2>我的任务<small>待我审核或者由我发起但未完成的工单。</small></h2>
									<div class="clearfix"></div>
								</div>
								<div class="x_content">
									<div class="">
										<ul class="to_do">
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Schedule meeting with new client</p></li>
											<li><p>Have IT fix the network printer</p></li>
											<li><p>Have IT fix the network printer</p></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<!-- End to do list -->
						<!-- start of weather widget -->
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="x_panel">
								<div class="x_title">
									<h2>本地天气<small>德克萨斯</small></h2>
									<div class="clearfix"></div>
								</div>
								<div class="x_content">
									<div class="row">
										<div class="col-sm-12">
											<div class="temperature">
												<b>Monday</b>, 07:30 AM
												<span>F</span>
												<span>C</span>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="weather-icon">
												<canvas height="84" width="84" id="partly-cloudy-day"></canvas>
											</div>
										</div>
										<div class="col-sm-8">
											<div class="weather-text">
												<h2>Texas<br><i>Partly Cloudy Day</i></h2>
											</div>
										</div>
									</div>
									<div class="col-sm-12">
										<div class="weather-text pull-right">
											<h3 class="degrees">23</h3>
										</div>
									</div>
									<div class="clearfix"></div>
									<div class="row weather-days">
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Mon</h2>
												<h3 class="degrees">25</h3>
												<canvas id="clear-day" width="32" height="32"></canvas>
												<h5>15<i>km/h</i></h5>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Tue</h2>
												<h3 class="degrees">25</h3>
												<canvas height="32" width="32" id="rain"></canvas>
												<h5>12<i>km/h</i></h5>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Wed</h2>
												<h3 class="degrees">27</h3>
												<canvas height="32" width="32" id="snow"></canvas>
												<h5>14<i>km/h</i></h5>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Thu</h2>
												<h3 class="degrees">28</h3>
												<canvas height="32" width="32" id="sleet"></canvas>
												<h5>15<i>km/h</i></h5>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Fri</h2>
												<h3 class="degrees">28</h3>
												<canvas height="32" width="32" id="wind"></canvas>
												<h5>11<i>km/h</i></h5>
											</div>
										</div>
										<div class="col-sm-2">
											<div class="daily-weather">
												<h2 class="day">Sat</h2>
												<h3 class="degrees">26</h3>
												<canvas height="32" width="32" id="cloudy"></canvas>
												<h5>10<i>km/h</i></h5>
											</div>
										</div>
										<div class="clearfix"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- end of weather widget -->
					</div>
				</div>
			</div>
		</div>
		<div class="right_col" role="main" id="queries" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>查询 <small>仅能执行SELECT操作</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left">
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">数据库 <span class="required">*</span></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>选择目标数据库</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">查询语句 <span class="required">*</span></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<textarea class="form-control" rows="9" placeholder="SELECT ..."></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-11 col-sm-11 col-xs-12 col-md-offset-1">
										<button type="submit" class="btn btn-primary">执行</button>
										<button type="button" class="btn btn-success">分析</button>
										<button type="reset" class="btn btn-info">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

				<div class="col-md-12 col-sm-12 col-xs-12" id="queries_rs">
					<div class="x_panel">
						<div class="x_title">
							<h2>查询结果 <small>显示上面查询语句的执行结果</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>工单ID</th>
										<th>工单名称</th>
										<th>发起人</th>
										<th>工单状态</th>
										<th>发起时间</th>
										<th>目标集群</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>Otto</td>
										<td>@mdo</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>Thornton</td>
										<td>@fat</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>the Bird</td>
										<td>@twitter</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_col" role="main" id="tickets" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12" id="tickets_list">
					<div class="x_panel">
						<div class="x_title">
							<h2>全部工单 <small>Try hovering over the rows</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>工单ID</th>
										<th>工单名称</th>
										<th>发起人</th>
										<th>工单状态</th>
										<th>发起时间</th>
										<th>目标集群</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<form class="form-horizontal form-label-left">
					<div class="form-group btnbox">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<button id="tickets_addBtn" type="button" class="btn btn-primary addBtn" style="margin-bottom:10px;">新建工单</button>
							<button id="tickets_addBtn" type="button" class="btn btn-success addBtn" style="margin-bottom:10px;">全部工单</button>
							<button id="tickets_addBtn" type="button" class="btn btn-info addBtn" style="margin-bottom:10px;">我的工单</button>
							<button id="tickets_addBtn" type="button" class="btn btn-warning addBtn" style="margin-bottom:10px;">等待审核的工单</button>
							<button id="tickets_addBtn" type="button" class="btn btn-danger addBtn" style="margin-bottom:10px;">审核不通过的工单</button>
						</div>
					</div>
				</form>
				<div class="col-md-12 col-sm-12 col-xs-12" id="tickets_create" style="display:none;">
					<div class="x_panel">
						<div class="x_title">
							<h2>新建工单 <small>different form elements</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left">
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">工单名称 <span class="required">*</span></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" placeholder="Default Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">目标数据库 <span class="required">*</span></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>Choose option</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">审核人 <span class="required">*</span></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>Choose option</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">变更语句 <span class="required">*</span>
									</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<textarea class="form-control" rows="9" placeholder="..."></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-1 col-sm-1 col-xs-12 control-label">是否备份<br><small class="text-navy">&nbsp;</small></label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option one. select more than one options
											</label>
										</div>
									</div>
								</div>
								<!--
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Select Grouped</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="select2_group form-control">
											<optgroup label="Alaskan/Hawaiian Time Zone">
												<option value="AK">Alaska</option>
												<option value="HI">Hawaii</option>
											</optgroup>
											<optgroup label="Pacific Time Zone">
												<option value="CA">California</option>
												<option value="NV">Nevada</option>
												<option value="OR">Oregon</option>
												<option value="WA">Washington</option>
											</optgroup>
											<optgroup label="Mountain Time Zone">
												<option value="AZ">Arizona</option>
												<option value="CO">Colorado</option>
												<option value="ID">Idaho</option>
												<option value="MT">Montana</option>
												<option value="NE">Nebraska</option>
												<option value="NM">New Mexico</option>
												<option value="ND">North Dakota</option>
												<option value="UT">Utah</option>
												<option value="WY">Wyoming</option>
											</optgroup>
											<optgroup label="Central Time Zone">
												<option value="AL">Alabama</option>
												<option value="AR">Arkansas</option>
												<option value="IL">Illinois</option>
												<option value="IA">Iowa</option>
												<option value="KS">Kansas</option>
												<option value="KY">Kentucky</option>
												<option value="LA">Louisiana</option>
												<option value="MN">Minnesota</option>
												<option value="MS">Mississippi</option>
												<option value="MO">Missouri</option>
												<option value="OK">Oklahoma</option>
												<option value="SD">South Dakota</option>
												<option value="TX">Texas</option>
												<option value="TN">Tennessee</option>
												<option value="WI">Wisconsin</option>
											</optgroup>
											<optgroup label="Eastern Time Zone">
												<option value="CT">Connecticut</option>
												<option value="DE">Delaware</option>
												<option value="FL">Florida</option>
												<option value="GA">Georgia</option>
												<option value="IN">Indiana</option>
												<option value="ME">Maine</option>
												<option value="MD">Maryland</option>
												<option value="MA">Massachusetts</option>
												<option value="MI">Michigan</option>
												<option value="NH">New Hampshire</option>
												<option value="NJ">New Jersey</option>
												<option value="NY">New York</option>
												<option value="NC">North Carolina</option>
												<option value="OH">Ohio</option>
												<option value="PA">Pennsylvania</option>
												<option value="RI">Rhode Island</option>
												<option value="SC">South Carolina</option>
												<option value="VT">Vermont</option>
												<option value="VA">Virginia</option>
												<option value="WV">West Virginia</option>
											</optgroup>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-1 col-sm-1 col-xs-12 control-label">Checkboxes and radios
									<br>
									<small class="text-navy">Normal bootstrap elements</small>
									</label>

									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option one. select more than one options
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option two. select more than one options
											</label>
										</div>
										<div class="radio">
											<label>
												<input checked="" value="option1" id="optionsRadios1" name="optionsRadios" type="radio"> Option one. only select one option
											</label>
										</div>
										<div class="radio">
											<label>
												<input value="option2" id="optionsRadios2" name="optionsRadios" type="radio"> Option two. only select one option
											</label>
										</div>
									</div>
								</div>
								-->
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Switch</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="">
											<label>
												<input class="js-switch" checked="" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Checked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Unchecked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; opacity: 0.5;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" checked="checked" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s; opacity: 0.5;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled Checked
											</label>
										</div>
									</div>
								</div>
								<div class="ln_solid"></div>
								<div class="form-group">
									<div class="col-md-11 col-sm-11 col-xs-12 col-md-offset-1">
										<button type="submit" class="btn btn-primary">提交</button>
										<button type="reset" class="btn btn-success">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_col" role="main" id="help" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>API 测试</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left" id="api_test">
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-primary">服务器</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-success">数据库</button>
									</div>
									<div class="col-md-10">
										<input class="form-control" placeholder="服务器ID" type="text">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-info">表</button>
									</div>
									<div class="col-md-10">
										<input class="form-control" placeholder="服务器ID,数据库名" type="text">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-warning">列</button>
									</div>
									<div class="col-md-10">
										<input class="form-control" placeholder="服务器ID,数据库名,表名" type="text">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-danger">索引</button>
									</div>
									<div class="col-md-10">
										<input class="form-control" placeholder="服务器ID,数据库名,表名" type="text">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-dark">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-default">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-primary">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-success">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-info">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-2">
										<button type="button" class="btn btn-block btn-warning">索引</button>
									</div>
									<div class="col-md-10">
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_col" role="main" id="servers" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12" id="servers_list">
					<div class="x_panel">
						<div class="x_title">
							<h2>Hover rows <small>Try hovering over the rows</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>主机ID</th>
										<th>主机地址</th>
										<th>端口号</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<form class="form-horizontal form-label-left">
					<div class="form-group btnbox">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<button id="servers_addBtn" type="button" class="btn btn-primary addBtn" style="margin-bottom:10px;">新建主服务器</button>
							<button id="slaves_addBtn" type="button" class="btn btn-success addBtn" style="margin-bottom:10px;">新建从服务器</button>
						</div>
					</div>
				</form>
				<div class="col-md-12 col-sm-12 col-xs-12" id="servers_create" style="display:none;">
					<div class="x_panel">
						<div class="x_title">
							<h2>新建主服务器 <small>different form elements</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left">
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Default Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" placeholder="Default Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Disabled Input </label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" disabled="disabled" placeholder="Disabled Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Read-Only Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" readonly="readonly" placeholder="Read-Only Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Date Of Birth <span class="required">*</span>
									</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<textarea class="form-control" rows="3" placeholder="..."></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Password</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" value="passwordonetwo" type="password">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">AutoComplete</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input name="country" id="autocomplete-custom-append" class="form-control col-md-10" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Select</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>Choose option</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-1 col-sm-1 col-xs-12 control-label">Checkboxes and radios
									<br>
									<small class="text-navy">Normal bootstrap elements</small>
									</label>

									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option one. select more than one options
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option two. select more than one options
											</label>
										</div>
										<div class="radio">
											<label>
												<input checked="" value="option1" id="optionsRadios1" name="optionsRadios" type="radio"> Option one. only select one option
											</label>
										</div>
										<div class="radio">
											<label>
												<input value="option2" id="optionsRadios2" name="optionsRadios" type="radio"> Option two. only select one option
											</label>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Switch</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="">
											<label>
												<input class="js-switch" checked="" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Checked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Unchecked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; opacity: 0.5;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" checked="checked" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s; opacity: 0.5;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled Checked
											</label>
										</div>
									</div>
								</div>
								<div class="ln_solid"></div>
								<div class="form-group">
									<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
										<button type="submit" class="btn btn-primary">提交</button>
										<button type="reset" class="btn btn-success">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-md-12 col-sm-12 col-xs-12" id="slaves_create" style="display:none;">
					<div class="x_panel">
						<div class="x_title">
							<h2>新建从服务器 <small>different form elements</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left">
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Default Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" placeholder="Default Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Disabled Input </label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" disabled="disabled" placeholder="Disabled Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Read-Only Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" readonly="readonly" placeholder="Read-Only Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Date Of Birth <span class="required">*</span>
									</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<textarea class="form-control" rows="3" placeholder="..."></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Password</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" value="passwordonetwo" type="password">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">AutoComplete</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input name="country" id="autocomplete-custom-append" class="form-control col-md-10" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Select</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>Choose option</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-1 col-sm-1 col-xs-12 control-label">Checkboxes and radios
									<br>
									<small class="text-navy">Normal bootstrap elements</small>
									</label>

									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option one. select more than one options
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option two. select more than one options
											</label>
										</div>
										<div class="radio">
											<label>
												<input checked="" value="option1" id="optionsRadios1" name="optionsRadios" type="radio"> Option one. only select one option
											</label>
										</div>
										<div class="radio">
											<label>
												<input value="option2" id="optionsRadios2" name="optionsRadios" type="radio"> Option two. only select one option
											</label>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Switch</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="">
											<label>
												<input class="js-switch" checked="" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Checked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Unchecked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; opacity: 0.5;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" checked="checked" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s; opacity: 0.5;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled Checked
											</label>
										</div>
									</div>
								</div>
								<div class="ln_solid"></div>
								<div class="form-group">
									<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
										<button type="submit" class="btn btn-primary">提交</button>
										<button type="reset" class="btn btn-success">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>				
			</div>
		</div>
		<div class="right_col" role="main" id="users" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>Hover rows <small>Try hovering over the rows</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>用户ID</th>
										<th>账号</th>
										<th>姓名</th>
										<th>邮箱</th>
										<th>注册时间</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> 查看</a>
											<a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> 编辑</a>
											<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> 删除</a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- add -->
				<form class="form-horizontal form-label-left">
					<div class="form-group btnbox">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<button id="users_addBtn" type="button" class="btn btn-primary addBtn" style="margin-bottom:10px;">新增用户</button>
						</div>
					</div>
				</form>
				<div class="col-md-12 col-sm-12 col-xs-12" id="users_create" style="display:none;">
					<div class="x_panel">
						<div class="x_title">
							<h2>New User Creation <small>different form elements</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form class="form-horizontal form-label-left">
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Default Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" placeholder="Default Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Disabled Input </label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" disabled="disabled" placeholder="Disabled Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Read-Only Input</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" readonly="readonly" placeholder="Read-Only Input" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Date Of Birth <span class="required">*</span>
									</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<textarea class="form-control" rows="3" placeholder="..."></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Password</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input class="form-control" value="passwordonetwo" type="password">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">AutoComplete</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<input name="country" id="autocomplete-custom-append" class="form-control col-md-10" type="text">
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Select</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<select class="form-control">
											<option>Choose option</option>
											<option>Option one</option>
											<option>Option two</option>
											<option>Option three</option>
											<option>Option four</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-1 col-sm-1 col-xs-12 control-label">Checkboxes and radios<br><small class="text-navy">Normal bootstrap elements</small></label>

									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option one. select more than one options
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input value="" type="checkbox"> Option two. select more than one options
											</label>
										</div>
										<div class="radio">
											<label>
												<input checked="" value="option1" id="optionsRadios1" name="optionsRadios" type="radio"> Option one. only select one option
											</label>
										</div>
										<div class="radio">
											<label>
												<input value="option2" id="optionsRadios2" name="optionsRadios" type="radio"> Option two. only select one option
											</label>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-1 col-sm-1 col-xs-12">Switch</label>
									<div class="col-md-11 col-sm-11 col-xs-12">
										<div class="">
											<label>
												<input class="js-switch" checked="" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Checked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" style="display: none;" data-switchery="true" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Unchecked
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="box-shadow: 0px 0px 0px 0px rgb(223, 223, 223) inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; opacity: 0.5;">
														<small style="left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled
											</label>
										</div>
										<div class="">
											<label>
												<input class="js-switch" disabled="disabled" checked="checked" style="display: none;" data-switchery="true" readonly="" type="checkbox">
													<span class="switchery switchery-default" style="background-color: rgb(38, 185, 154); border-color: rgb(38, 185, 154); box-shadow: 0px 0px 0px 11px rgb(38, 185, 154) inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s; opacity: 0.5;">
														<small style="left: 12px; background-color: rgb(255, 255, 255); transition: background-color 0.4s ease 0s, left 0.2s ease 0s;"></small>
													</span> Disabled Checked
											</label>
										</div>
									</div>
								</div>
								<div class="ln_solid"></div>
								<div class="form-group">
									<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
										<button type="submit" class="btn btn-primary">提交</button>
										<button type="reset" class="btn btn-success">重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_col" role="main" id="options" style="display:none;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>Hover rows <small>Try hovering over the rows</small></h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>#</th>
										<th>First Name</th>
										<th>Last Name</th>
										<th>Username</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- add -->
				<form class="form-horizontal form-label-left">
					<div class="form-group btnbox">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<button id="users_addBtn" type="button" class="btn btn-primary addBtn" style="margin-bottom:10px;">提交</button>
						</div>
					</div>
				</form>

			</div>
		</div>
		<!-- /page content -->
	</div>
</div>
<!-- jQuery -->
<script src="/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="/vendors/skycons/skycons.js"></script>
<!-- DateJS -->
<script src="/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="/vendors/moment/min/moment.min.js"></script>
<script src="/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Switchery -->
<script src="/vendors/switchery/dist/switchery.min.js"></script>
<!-- treeview -->
<script src="/vendors/jquery-treeview/jquery.treeview.js"></script>
<!-- Custom Theme Scripts -->
<script src="/assets/scripts/custom.min.js"></script>
<script src="/assets/scripts/jquery.cookie.min.js"></script>
<script>
$(function() {
	var token = $.cookie("token");
	if (token != undefined) {
		$.ajax({
			type: "POST",
			url: "/token-validation",
			dataType: "json",
			data: {
				"token": token
			},
			success: function(data) {
				if (data.valid) {
					// TODO:
					$("#login").hide();
					$("#main").show();
					$.each(data.roles, function(n, value) {
						if (value == "viewer") {
							$("#nav-pages li:eq(1)").show();
						}
						if (value == "creator" || value == "reviewer" || value == "ddl reviewer") {
							$("#nav-pages li:eq(2)").show();
						}
						if (value == "admin") {
							$("#nav-pages li:eq(3)").show();
							$("#nav-pages li:eq(4)").show();
							$("#nav-pages li:eq(5)").show();
						}
					});
					$(".user-profile").html("<img src=\"/assets/images/avatars/01.png\" alt=\"\">"
						+ $.cookie("name")
						+ "&nbsp;&nbsp;<span class=\"fa fa-angle-down\"></span>");
					return;
				}
			}
		});
	}

	// TODO:
	$("#login").show();
	$("#main").hide();
	return;
});

// events-binding
$(function() {
	$("#btn_login").click(function() {
		$.ajax({
			type: "POST",
			url: "/user-login",
			data: {
				user: $("#txt_login").val(),
				password: $("#password").val()
			},
			success: function(data) {
				$.cookie("token", data.token);
				$.cookie("uid", data.user_id);
				$.cookie("login", data.login);
				$.cookie("name", data.name);
				// TODO:
				$("#login").hide();
				$("#main").show();
				$.each(data.roles, function(n, value) {
					if (value == "viewer") {
						$("#nav-pages li:eq(1)").show();
					}
					if (value == "creator" || value == "reviewer" || value == "ddl reviewer") {
						$("#nav-pages li:eq(2)").show();
					}
					if (value == "admin") {
						$("#nav-pages li:eq(3)").show();
						$("#nav-pages li:eq(4)").show();
						$("#nav-pages li:eq(5)").show();
					}
				});
				$(".user-profile").html("<img src=\"/assets/images/avatars/01.png\" alt=\"\">"
					+ $.cookie("name")
					+ "&nbsp;&nbsp;<span class=\"fa fa-angle-down\"></span>");
			},
			error: function(xhr, status, text) {
				// TODO:
				alert("Wrong login name or password.")
			}
		});
	});

	$("#logout").click(function() {
		$.removeCookie("token");
		$("#login").show();
		$("#main").hide();
	});

	$("#test").click(function() {
		$.ajax({
			type: "GET",
			url: "/api/servers",
			beforeSend: function(request) {
				request.setRequestHeader("Authorization", "Token " + $.cookie("token"));
			},
			success: function(data) {
				$("#test").after(data);
			},
			error: function(xhr, status, text) {
				console.log(xhr.status);
			}
		});
	});

	$("#nav-pages li").click(function() {
		// 当前tab高亮
		$('#nav-pages li').removeClass('open')
		$(this).addClass('open');

		var pages = ["#dashboard","#queries","#tickets","#servers","#users","#options","#help"];
		pages.forEach(function(value,index,array){
			$(value).hide();
		});
		$(pages[$(this).index()]).show();
	});

	$("#api_test button").click(function() {
		var caption = $(this).text();
		var url = "";
		switch (caption) {
			case "服务器":
				url = "/api/masters";
				break;
			case "数据库":
				var master_id = $(this).parent().next().children("input").val();
				url = "/api/masters/" + master_id + "/databases";
				break;
			case "表":
				data = $(this).parent().next().children("input").val().split(",");
				url = "/api/masters/" + data[0] + "/databases/" + data[1] + "/tables";
				break;
			case "列":
				data = $(this).parent().next().children("input").val().split(",");
				url = "/api/masters/" + data[0] + "/databases/" + data[1] + "/tables/" + data[2] + "/columns";
				break;
			case "索引":
				data = $(this).parent().next().children("input").val().split(",");
				url = "/api/masters/" + data[0] + "/databases/" + data[1] + "/tables/" + data[2] + "/indices";
				break;
		}
		console.log(url);
		$.ajax({
			type: "GET",
			url: url,
			beforeSend: function(request) {
				request.setRequestHeader("Authorization", "Token " + $.cookie("token"));
			},
			success: function(data) {
				console.log(data);
			},
			error: function(xhr, status, text) {
				console.log(xhr.status);
			}
		});
	});

	// 根据URL参数类型定向到响应的视图层 start
	(function(){
		var url = location.href;
		var $navTabs = $('#nav-pages li'), $navViews = $('.top_nav').nextAll(); 
		for(var i=0;i<$navTabs.length;i++){
			var item = $navTabs.eq(i).find('a').html();
			if(url.toLowerCase().indexOf(item.toLowerCase())>0){
				// nav菜单高亮
				$navTabs.removeClass('open')
				$navTabs.eq(i).addClass('open');
				// 映射nav响应的视图层
				$navViews.hide();
				$navViews.eq(i).show();
				break;
			}
		}		
	})();
	// 根据URL参数类型定向到响应的视图层 end
	// tickets | servers | users 新增记录
	$('.right_col .btnbox').off().on('click', '.addBtn', function(){
		$("[id$='_create']").hide();
		$('#'+$(this).attr("id").split('_')[0]+'_create').show(); 
	});

	// treeview
	// $("#add").click(function() {
	// 	var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
	// 		"<li><span class='file'>Item1</span></li>" +
	// 		"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
	// 	$("#browser").treeview({
	// 		add: branches
	// 	});
	// });

	$("#browser").treeview({
		toggle: function() {
			console.log("%s was toggled.", $(this).find(">span").text());
		}
	});
});
</script>
</body>
</html>
